import { defineComponent, ref, onMounted, onUnmounted } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent } from 'echarts/components'
import { MockDataGenerator } from '../utils/mockData'
import type { EChartsOption } from 'echarts'
import './CircleProgress.css'

use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent
])

export default defineComponent({
  name: 'CircleProgress',
  components: {
    VChart
  },
  props: {
    title: {
      type: String,
      default: '完成度'
    },
    value: {
      type: Number,
      default: 75
    },
    color: {
      type: Array as () => string[],
      default: () => ['#00d4ff', '#0066ff']
    }
  },
  setup(props) {
    const currentValue = ref(props.value)

    const option = ref<EChartsOption>({
      title: {
        text: `${currentValue.value}%`,
        left: 'center',
        top: '38%',
        textStyle: {
          fontSize: 36,
          fontWeight: 'bold',
          color: props.color[0]
        }
      },
      tooltip: {
        trigger: 'item',
        formatter: '{b}: {c}%'
      },
      series: [
        {
          name: props.title,
          type: 'pie',
          radius: ['70%', '90%'],
          avoidLabelOverlap: false,
          label: {
            show: false
          },
          labelLine: {
            show: false
          },
          data: [
            {
              value: currentValue.value,
              name: '已完成',
              itemStyle: {
                color: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 1,
                  colorStops: [
                    { offset: 0, color: props.color[0] },
                    { offset: 1, color: props.color[1] }
                  ]
                },
                shadowColor: props.color[0],
                shadowBlur: 20
              }
            },
            {
              value: 100 - currentValue.value,
              name: '未完成',
              itemStyle: {
                color: 'rgba(255, 255, 255, 0.05)',
                borderColor: 'rgba(255, 255, 255, 0.1)',
                borderWidth: 1
              }
            }
          ],
          emphasis: {
            scale: false
          }
        }
      ]
    })

    let timer: number | null = null

    onMounted(() => {
      timer = window.setInterval(() => {
        currentValue.value = MockDataGenerator.randomFloat(60, 95, 0)
        option.value = {
          ...option.value,
          title: {
            ...option.value.title as any,
            text: `${currentValue.value}%`
          },
          series: [{
            ...option.value.series![0] as any,
            data: [
              {
                value: currentValue.value,
                name: '已完成',
                itemStyle: {
                  color: {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 1,
                    y2: 1,
                    colorStops: [
                      { offset: 0, color: props.color[0] },
                      { offset: 1, color: props.color[1] }
                    ]
                  },
                  shadowColor: props.color[0],
                  shadowBlur: 20
                }
              },
              {
                value: 100 - currentValue.value,
                name: '未完成',
                itemStyle: {
                  color: 'rgba(255, 255, 255, 0.05)',
                  borderColor: 'rgba(255, 255, 255, 0.1)',
                  borderWidth: 1
                }
              }
            ]
          }]
        }
      }, 3000)
    })

    onUnmounted(() => {
      if (timer) {
        clearInterval(timer)
      }
    })

    return () => (
      <div class="circle-progress">
        <div class="circle-progress__title">{props.title}</div>
        <VChart option={option.value} autoresize style="height: 200px; width: 100%;" />
      </div>
    )
  }
})
